<!-- quiNav导航组件 -->
<template>
  <div class="qui-nav nav-type-1">
    <a
      v-for="(item, index) in items"
      :class="[commonClass, item.active ? activeClass : '']"
      v-on:click="navClickEvent(items, index)"
      :key="index"
    >
      <span class="nav-txt">{{ item.text }}</span>
    </a>
    <slot name="slot"></slot>
  </div>
</template>

<script>
export default {
  // props:{
  //   href:{
  //     default:'#/'
  //   }
  // },
  data: function() {
    return {
      commonClass: "nav-item",
      activeClass: "active",
      items: [
        {
          text: "首页",
          active: true,
          href: "#/nav"
        },
        {
          text: "列表",
          active: false,
          href: "#/nav"
        },
        {
          text: "关于",
          active: false,
          href: "#/nav"
        },
        {
          text: "招聘",
          active: false,
          href: "#/nav"
        }
      ]
    };
  },
  methods: {
    navClickEvent: function(items, index) {
      // console.log({ items }, { index });
      //   默认切换类的动作
      items.forEach(el => {
        el.active = false;
      });
      items[index].active = true;
      /*开放用户自定义的接口*/
      this.$emit("navClickEvent", items, index);
    }
  },
  beforeCreate: function() {
    console.log("beforeCreate");
    console.log(this.commonClass); //在created之前data中的值还未创建，所以显示undefined
  }, //组件实例化之前
  created: function() {
    console.log("created");
    console.log(this.commonClass); //在created后data中的值被创建，所以正常显示
    console.log(this.$el); //this.$el代表组件本身，在mounted之前组件本身未被挂载，所以显示undefined
  }, //组件实例化了
  beforeMount: function() {
    console.log("beforeMount");
  }, //组件写入dom结构之前
  mounted: function() {
    //组件写入dom结构了
    console.log("mounted:元素挂载到页面上了");
    console.log(this.$el);
  },
  beforeUpdate: function() {
    console.log("beforeUpdate");
  }, //组件更新前
  updated: function() {
    console.log("updated");
  }, //组件更新比如修改了文案
  beforeDestroy: function() {
    console.log("beforeDestroy");
  }, //组件销毁之前
  destroyed: function() {
    console.log("destroyed");
  }, //组件已经销毁
  deactivated() {
    console.log("deactivated:未激活");
  },
  activated() {
    console.log("activated:激活了");
  }//只有与keep-alive配合，缓存保护时才会调用
};
</script>
<style scoped>
@import "./css/reset.import.css";
@import "./css/qui-nav.import.css";
</style>
